import { View, CommonEvent, Input, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import "../../../images/public/style.css";
import styles from "./index.module.scss";
// import './index.scss';

interface LgSearchProps {
  type?: "A" | "B";
  placeholder?: string;
  value?: string;
  onConfirm?: (value: string | object, event?: CommonEvent) => void;
  onInput?: (value: string | object, event?: CommonEvent) => void;
  onFocus?: (event?: CommonEvent) => void;
  onBlur?: (event?: CommonEvent) => void;
  onClose?: (event?: CommonEvent) => void;
  searchList?: object[] | string[];
  searchAttr?: string;
  choSearchItem?: (value: string | object) => void;
  imageAttr?: string;
  closeBtnName?: string;
  className?: string;
  style?: string | object;
  focus?: boolean;
  autoFocus?: boolean;
}

export default function LgSearch(props: LgSearchProps) {
  const type = props.type || "A";
  const [showBInput, setShowB] = useState(type == "A");
  const [value, setVal] = useState(props.value || "");
  const [focus, setfocus] = useState(false);
  const [propsFocus, setPropsFoucus] = useState(false);
  const onFocus = () => {
    setfocus(true);
    props.onFocus && props.onFocus();
  };
  const onBlur = () => {
    setfocus(false);
    props.onBlur && props.onBlur();
  };
  const onInput = (e) => {
    let { value } = e.detail;
    setVal(value);
    props.onInput && props.onInput(value);
  };
  const onConfirm = () => {
    props.onConfirm && props.onConfirm(value);
  };
  const clearInput = () => {
    setVal("");
    props.onConfirm && props.onConfirm("");
    props.onClose && props.onClose();
  };

  const hidecloseBtnName = () => {
    setShowB(false);
  };
  const handShowBInput = () => {
    if (type == "B" && !showBInput) {
      setShowB(true);
    }
  };
  const formatSearchText = (text) => {
    if (!text) return "";
    let index = text.indexOf(value);
    if (index == -1) return text;
    var headText = text.substr(0, index);
    var endText = text.substr(index + value.length);
    return (
      <Text>
        {headText}
        <Text style="color: #0090ff;">{value}</Text>
        {endText}
      </Text>
    );
  };

  const choSearchItem = (e) => {
    var index = e.currentTarget.dataset.index;
    var choData = props.searchList ? props.searchList[index] : "";
    setVal(props.searchAttr ? choData[props.searchAttr] : choData);
    props.choSearchItem && props.choSearchItem(choData);
  };

  useEffect(() => {
    setTimeout(() => {
      if (props.focus) {
        setPropsFoucus(props.focus);
      }
    }, 200);
  }, []);

  const rootClass = styles[`lg_search_warp_${type}`];
  const showClass =
    showBInput && type == "B" ? styles["lg_search_warp_B_show"] : "";
  const propsClass = props.className || "";

  return (
    <View
      className={`${rootClass} ${showClass} ${propsClass}`}
      style={props.style || ""}
    >
      <View className={styles["lg_search"]} onClick={handShowBInput}>
        <View
          className={`${styles["search_icon"]}  ${
            focus ? styles["search_icon_focus"] : ""
          }`}
          onClick={onConfirm}
        />
        <Input
          className={styles["search_input"]}
          type="text"
          placeholderClass="search_input_placeholder"
          confirmType="search"
          placeholder={props.placeholder || "输入文字检索"}
          value={showBInput ? value : "搜索"}
          onFocus={onFocus}
          onBlur={onBlur}
          onInput={onInput}
          onConfirm={onConfirm}
          focus={propsFocus}
          autoFocus={props?.autoFocus}
        />
        <View
          className={styles["lg_search_dele_btn"]}
          style={`display:${showBInput && value ? "block" : "none"}`}
          onClick={clearInput}
        >
          <View className={`icon-b01701 ${styles["icon-b01701"]}`} />
        </View>
      </View>
      {props.type && props.type == "B" ? (
        <View
          className={styles["lg_search_close_btn"]}
          onClick={hidecloseBtnName}
        >
          {props.closeBtnName || "取消"}
        </View>
      ) : null}
      <View
        className={styles["lg_search_list"]}
        style={`height: ${
          showBInput && props.searchList && props.searchList.length
            ? Taro.pxTransform(props.searchList.length * 100)
            : "0"
        }`}
      >
        {props.searchList
          ? props.searchList.map((o, i) => {
              return (
                <View
                  key={"search_i" + i}
                  className={styles["lg_search_item oneline"]}
                  data-index={i}
                  onClick={choSearchItem}
                >
                  {props.imageAttr ? (
                    <View className={styles["lg_search_i_image"]} />
                  ) : null}
                  {formatSearchText(props.searchAttr ? o[props.searchAttr] : o)}
                </View>
              );
            })
          : null}
      </View>
    </View>
  );
}
